<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>${article.title}</title>
    <link rel="stylesheet" href="layui/css/layui.css">
    <link rel="stylesheet" href="css/index.css">
    <link rel="stylesheet" href="css/global.css">
    <link rel="stylesheet" href="css/font_24081_dddajmj0coc4n29.css">
    <link rel="stylesheet" href="layui/css/modules/layer/default/layer.css">
    <script src="js/jquery.min.js"></script>
	<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
	<script src="https://cdn.staticfile.org/axios/0.18.0/axios.min.js"></script>

</head>

<body>
    <div class="forum-header">
        <div class="layui-container">
            <a class="logo" href="index.html"><img src="img/logo.png" alt=""></a>

            <div class="fly-column-right layui-hide-xs" style="top:15px;">
                <span class="fly-search LAY_search" style="position:relative;top:8px" id="Search">
					<i class="layui-icon"></i>
				</span>
                <a href="/post/add" class="layui-btn">发表新帖</a>
            </div>
    </div>
    </div>

    <div class="layui-row layui-col-space15" style="margin-top:20px">
        <div class="layui-container">
            <div class="layui-row">
                <div class="layui-col-md15">
                    <div class="fly-panel detail-box">
                        <h1 id="title"></h1>
                        <div class="fly-detail-info">
                            <span class="layui-badge layui-bg-green fly-detail-column"> 提问 </span>
                            

                            <span class="fly-list-nums">
                                    <a href="#comment" ><i class="iconfont" title="回答"></i> <span id="comment_count"></span></a>
                                    <i class="iconfont" title="人气"></i> 
                                </span>

                        </div>
                        <div class="detail-about"  style="font-size: 14px;">
                            <a class="fly-avatar" href="img/questioner.jpg"> <img src="img/questioner.jpg" alt="article.name"> </a>
                            <div class="fly-detail-user">
                                <a href="/u/${article.userId}/" class="fly-link"> <cite  style="font-size: 16px;" id="askname"></cite> <i class="iconfont icon-renzheng" title="正式会员"></i> <i class="layui-badge fly-badge-vip">会员</i> </a> <span id="post_time"></span> </div>
                            
                        </div>
                        <div style="font-size:16px;" >
                            <br/>
                            <hr/>
                            <div id="content"> </div>
                        </div>
                    <br/>

                    <div class="fly-panel detail-box" id="flyReply">
                        <fieldset class="layui-elem-field layui-field-title" style="text-align: center;">
                            <legend>回帖</legend>
                        </fieldset>
                        
                        <ul class="jieda" id="jieda" >
                            <li v-for="ans in answers">
                                <div class="detail-about detail-about-reply">
                                    <a class="fly-avatar" href="/u/${w.userId}"> <img src="img/answer.png" alt="name"> </a>
                                    <div class="jieda-reply t-star" style="position: relative;right:100px;float:right;bottom:4px;">
										<span class="jieda-zan " type="zan"  >
											<i class="iconfont icon-zan" ></i>
											<em>{{ans.thumb}}</em>
										</span>
									</div>
									<div class="fly-detail-user">
                                        <a href="/u/${w.userId}/" class="fly-link"> <cite>{{ans.username}}</cite> <i class="iconfont icon-renzheng" title="会员"></i> <i class="layui-badge fly-badge-vip">会员</i> </a>
                                    </div>
                                    <div class="detail-hits"> <span>"这个人很懒,什么都没有留下"</span> </div>
									
								</div>
                                <br/>
								<div v-html="ans.content"></div>
                                <br>
                                <div class="jieda-reply"> <span class="jieda-zan " type="zan"> <i class="layui-icon layui-icon-edit"></i><em>于{{ans.timestamp}}回复</em> </span>  </div>
                            </li>
                        </ul>
                        
						<div v-show="isLogin">
                            <div style="text-align: center"> </div>
                            <a name="comment"> </a>
                            <div class="layui-form layui-form-pane">
                                <textarea id="editText" style="display: none;" lay-verify="article_content" name="replyContent"></textarea>
                                <br/>
                                <input type="hidden" value="${article.id}" name="tId"/>
                                <button class="layui-btn" style="width:150px;" lay-submit lay-filter="commit">提交</button>
                            </div>
						</div>
                        <div v-if="!isLogin">
                            <fieldset class="layui-elem-field layui-field-title" style="text-align: center;">
                                <legend>登陆后可回帖</legend>
                            </fieldset>
                        </div>
                    </div>
					
                </div>


            </div>
        </div>
    </div>
    </div>



    <div class="fly-footer">
        
            <a href="#" target="_blank">关于我们</a>
            <a href="#" target="_blank">友情链接</a>
            <a href="#" target="_blank">社区小黑板</a>

    </div>
    <script src="layui/layui.js"></script>
    <script src="layui/lay/modules/layer.js"></script>
    <script src="js/index.js"></script>
 
</body>
<script>
// 获取数据
function getData(id) {
	$.ajax({
		type: "GET",
		url: "http:localhost:8080/api/question/info",
		data:{
			qid: id
		},
		dataType: "json",
		async: false,
		success: function(data) {
			console.log(data.data);
			var question=data.data;
			if (data.code==200) {
				$('#title').text(question.title);
				$('#content').text(question.content);
				$('#askname').text(question.username);
				$('#post_time').text(question.timestamp);
				$('#comment_count').text(question.count);
			} else {
				console.log('系统提示', data.msg);
				//$.messager.alert('系统提示', data.msg);
			}
		}
	}).done().fail(function() {
		$.messager.alert('系统提示', '服务器错误！');
	});
}
var request = {
	getUrlParam: function(name) {
		var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)"); //构造一个含有目标参数的正则表达式对象
		var r = window.location.search.substr(1).match(reg); //匹配目标参数
		if (r != null) return unescape(r[2]);
		return null;
	},
}
// 加载页面
$(document).ready(function() {
	var jsonStr = JSON.parse(unescape(request.getUrlParam('qid')));
	getData(jsonStr);
})
new Vue({
	el: '#flyReply',
	data:function(){
		return {
		isLogin:false,
		answers: null,
		qid:0,
		uid:0
	}},
	mounted:function () {
		this.qid = JSON.parse(unescape(request.getUrlParam('qid')));
		qid=this.qid;
		var storage=window.localStorage;
		//storage.setItem("uid",5)
		//storage.removeItem("uid")
		if(storage.uid){
			this.isLogin=true;
			this.uid=Number(storage.uid);
			uid=this.uid;
		}else{
			this.isLogin=false;
		}
		//console.log();
		this.answers=this.getAnserws();
		//console.log(this.answers);
		
		//this.getAnserws();
		for( a in this.answers){
			//document.getElementById("demo").innerHTML="<em>aa</em>";
			this.answers[a].username=this.getUserName(this.answers[a].uid);
		}
		console.log(this.answers);
	},
	methods: {
	getUserName:function (uid){
		var res=null;
		$.ajax({
			type: "GET",
			url: "http://localhost:8080/api/query",
			async: false,
			data:{
				uid:uid
			},
			//dataType: "json",
			async: false,
			success: function(data) {
				//console.log(data.data);
				//this.answers=data.data;
				//this.getUserName(data.data);
				res=data.data.username;
			}
		}).done().fail(function() {
			$.messager.alert('系统提示', '服务器错误！');
		});
		return res;
	},
	// 获取数据
	getAnserws:function () {
		var res=null;
		$.ajax({
			type: "GET",
			url: "http://localhost:8080/api/answer/list",
			async: false,
			data:{
				qid:this.qid
			},
			//dataType: "json",
			async: false,
			success: function(data) {
				console.log(data.data);
				//this.answers=data.data;
				//this.getUserName(data.data);
				res=data.data;
			}
		}).done().fail(function() {
			$.messager.alert('系统提示', '服务器错误！');
		});
		return res;
	},
	addAnswer: function(){
		var ans={
				qid:this.qid,
				uid:this.uid,
				content:$("#editText").field
			};
		console.log(ans);
		return;
		$.ajax({
			url:'http://localhost:8080/api/answer/add'
			,type:'POST'
			,contentType:'application/json'
			,data:JSON.stringify(ans)
			,dataType:"json"
			,success:function(result){
				console.log(result);
				layer.msg(result.msg,{time:2000});
				setTimeout('window.parent.location.reload()',2000);
			}
		});
	}
  }
})

$(".t-star").on('click',function(){
   $.ajax({
	   url:'/post/star'
	   ,type:'post'
	   ,contentType:"application/json"
	   ,data:JSON.stringify({
		   "userId":"${article.userId}",
		   "articleId":"${article.id}"
	   })
	   ,dataType:"json"
	   ,success:function(result){
				layer.msg(result.msg,{time:2000});
			   setTimeout('window.parent.location.reload()',1500);
	   }
	   ,error:function(a){
		   layer.msg("请登录后在进行操作");
	   }
   });
});
$(".r-star").on('click',function(){
	alert(2);
});

layui.use(['layedit','form'], function() {
	var layedit = layui.layedit;
	var form=layui.form;
	layedit.set({
		uploadImage:{
			url:"/post/uploadImg"
			,type:"post"
		}
	});
	var index=layedit.build('editText',{
		tool:['code',
			'strong' //加粗
			,'italic' //斜体
			,'underline' //下划线
			,'del' //删除线

			,'|' //分割线

			,'left' //左对齐
			,'center' //居中对齐
			,'right' //右对齐
			,'link' //超链接
			,'unlink' //清除链接
			,'face' //表情
			,'image' //插入图片
		]
	});
	form.verify({
		title:function(value){
			//if(value.length<=-1){
				//return "标题至少输入5个字符!";
			//}
		}
		,article_content:function(value){
			layedit.sync(index);
			//if(value.length<=-1){
				//return value;
				//return "至少输入5个字符!";
			//}
		}
	});
	form.on("submit(commit)",function(data){
		var ps={
			uid:uid,
			qid:qid,
			content:data.field.replyContent
		}
		console.log(ps);
		//return;
		$.ajax({
			url:'http://localhost:8080/api/answer/add'
			,type:'post'
			,contentType:'application/json'
			,data:JSON.stringify(ps)
			,dataType:"json"
			,success:function(result){
				layer.msg(result.msg,{time:2000});
				setTimeout('window.parent.location.reload()',2000);
			}
		});
	});


});
</script>
</html>

